<template>
  <view class="download-box">
    <vue3-seamless-scroll :list="list" class="scroll" direction="left" singleLine>
      <div class="item" v-for="item in list" :key="item">
        <img :src="item" class="img">
      </div>
    </vue3-seamless-scroll>
    <view style="margin-top:50rpx">
      <vue3-seamless-scroll :list="list1" class="scroll" direction="left" singleLine v-model="startPlay">
        <div class="item" v-for="item in list1" :key="item">
          <img :src="item" class="img">
        </div>
      </vue3-seamless-scroll>
    </view>
    <view style="margin: 50rpx 0 80rpx 0">
      注册成功，下载app即可开启宠生活
    </view>
    <view class="btn-down" @click="download(1)">
      <img src="https://img.qumoyugo.com/webimgbg/pet-down-apple-icon.png">
      App Store 下载
    </view>
    <view class="btn-down" @click="download(2)">
      <img src="https://img.qumoyugo.com/webimgbg/pet-down-andr-icon.png" style="margin-right:10rpx">
      Android 下载
    </view>
    <uni-popup ref="popupShare" type="center" mask-background-color="rgba(0,0,0,0.5)">
      <view class="share-popup">
        <view class="share-syt">
          <img src="https://img.qumoyugo.com/webimgbg/pico-share-arrow.png" class="img">
          <view class="text">点此“<text style="font-weight: bold">···</text>”选择在浏览器中打开</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { ref, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const list = ref([
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down1.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down15.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down12.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down16.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down13.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down4.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down5.jpg/260x360',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down14.jpg/260x360'
])
const list1 = ref([
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down3.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down7.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down9.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down10.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down8.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down6.png',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down11.jpg',
  'https://img.qumoyugo.com/webimgbg/pets-send-frd-down2.png'
])
const startPlay = ref(false)
const popupShare = ref(null)
setTimeout(() => {
  startPlay.value = true
}, 500)
const download = (type) => {
  if (type === 1) {
    location.href = 'https://itunes.apple.com/app/id1626817168'
  } else if (type === 2) {
    if (isWeiXin()) {
      popupShare.value.open()
    } else {
      $https({
        type: '',
        url: '/version/official?endpoint=PICO'
      }).then(res => {
        if (res.code === 0) {
          location.href = res.data.downloadUrl
        } else {
          uni.showToast({
            title: '下载失败,请重试',
            icon: 'none'
          })
        }
      })
    }
  }
}
const isWeiXin = () => {
  const ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') { // eslint-disable-line
    return true
  } else {
    return false
  }
}
</script>
<style scoped lang="scss">
.download-box{
  padding-top: 100rpx;
  font-size: 32rpx;
  text-align: center;
  .scroll {
    height: 360rpx;
    width: 100vw;
    overflow: hidden;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15rpx;
    }
    .img{
      width: 260rpx;
      height: 360rpx;
      border-radius: 12rpx;
    }
  }
  .btn-down{
    width: 298rpx;
    border-radius: 40rpx;
    border: 2rpx solid #222222;
    margin: 0 auto;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    justify-content: center;
    margin-bottom: 26rpx;
    line-height: 44rpx;
    img{
      width: 44rpx;
      height: 44rpx;
      vertical-align: middle;
    }
  }
}
.share-popup{
  right: 30rpx;
  position: fixed;
  top: 30px;
}
.share-syt{
  width: 430rpx;
  .img{
    width: 186rpx;
    height: 199rpx;
    float: right;
  }
  .text{
    line-height: 36rpx;
    padding: 15rpx 24rpx;
    background-color: #fff;
    border-radius: 33rpx;
    font-size: 26rpx;
    color: #333333;
    display: inline-block;
    margin-top: 12rpx;
  }
}
</style>
